CSS Customizations for Buttons

This topic introduces examples of common CSS customizations for buttons in a form. CSS customizations change only static properties like appearance and position. If you want to show or hide buttons based on other events that occur in the form, see JavaScript Customizations for Buttons.

In Forms, buttons generally consist of a button wrapper and an input element. The following is what the HTML for a Submit button may look like:

<div class="btn-wrapper">
  <input type="submit" class="action-btn checkRequired Submit" name="action" 
  aria-labelledby="action" value="Submit">
</div>

The Submit button typically has the type submit. Other buttons, such as the Previous and Next buttons for paginated forms, typically have the type button.

To alter a button's appearance and position, it is often necessary to target the button wrapper (in our snippet above, this would be the div element with class btn-wrapper). The following examples demonstrate some common customizations for buttons.

Changing Button Positions

The following CSS rule-sets center the Submit button, which is left-aligned by default.

div.btn-wrapper {display:block}
.Submit {display:block; margin:auto}

As we saw in the HTML snippet above, the Submit button has the class Submit. The second line of the CSS snippet targets the button using this class. The first line targets the button wrapper, using the fact that it is a div element with class btn-wrapper.

Setting the display property to block means that the targeted element will take up the whole width of the page and cannot be displayed side-by-side with other elements. Setting the margin property to auto means that the targeted element is centered within its container.

To right-align a button instead, use the property float:right rather than margin:auto:

div.btn-wrapper {display:block}
.Submit {display:block; float:right}

The Previous and Next buttons are both contained within a div with the class cf-pagination-btn. They are separated from each other by a spacer. You would use div.cf-pagination-btn to target their container, div.cf-pagination-btn-spacer to target the spacer, .cf-prev-btn to target the Previous button, and .cf-next-btn to target the Next button.

Changing Button Appearance

You can change the colors of a button using CSS. Here we show you how to do this for the file upload button, which has the class fileuploader. The property background-color sets the background color of the button. border-color sets the color of the button's border. color sets the color of the button's text. We change all three of these colors in this snippet:

.fileuploader {background-color:#2ab; 
		border-color:#2bc!important; 
		color:white;}

The above snippet changes the colors of all file upload buttons on your form, as it targets the class fileuploader, to which all file upload buttons belong. To change the file upload button for a particular field only, use your browser to determine the id of the file upload button. In the following snippet, we assume that the id is Field60:

input#Field60.fileuploader {
 	background-color:#2ab; 	
	border-color:#2bc!important; 
	color:white;}